<template>
    <div v-if="isPlaying" class="progress">
        <div style="display: flex;gap: 16px;">
            <Timer v-if="isPlaying && (store.mode == 'fire' || store.mode == 'water')" :total="totalStep"
                :step="curStep">
            </Timer>
            <UButton v-if="store.mode != 'car'" @click="stopSimulatePlaying">终止模拟</UButton>
        </div>
        <el-progress :percentage="percentage" :format="textFormat" :text-inside="true" striped striped-flow
            :duration="5" color="#004440">
            <div style="width: 100%">
                <span class="percentage txt">模拟进行中...{{ percentage }}%</span>
                <!-- <span v-if="store.mode != 'car'" class="stop_simulate txt" @click="stopSimulatePlaying">停止模拟</span> -->
            </div>
        </el-progress>
    </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance, watch } from 'vue';
import { useStore } from '@/stores';
const { proxy } = getCurrentInstance();
const store = useStore();
const bus = proxy.$bus;
const totalStep = ref(0);
const curStep = ref(0);
const isPlaying = ref(false);
const percentage = ref(0);
watch(() => store.mode, () => {
    isPlaying.value = false;
});
onMounted(() => {
    bus.on("playingStatus", args => {
        playing(args);
    });
});
function playing(args) {
    if (store.mode != args.mode) {
        return;
    }
    isPlaying.value = true;
    const current = args['step'];
    const total = args['totalSteps'];
    if (!total) {
        console.log("没有获取到总step数据");
        return;
    }
    totalStep.value = total;
    curStep.value = args['step'];
    if (current < total - 1) {
        let per = current / total * 100;
        per = per.toFixed(0);
        percentage.value = Number(per);
    } else {
        percentage.value = 100;
        localStorage.removeItem(args['id']);
        isPlaying.value = false;

    }
}
function textFormat(percent) {
    return "模拟中..." + percent + "%";
}
function stopSimulatePlaying() {
    bus.emit("stopPlaying");
    isPlaying.value = false;
}
</script>
<style scoped lang="scss">
.progress {
    width: 30vw;
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;

    .percentage {
        margin-right: 50px;
        margin-left: 10px;
    }

    .stop_simulate {
        cursor: pointer;
        color: #fff;
    }

    .txt {
        text-shadow: 1px 0 #000,
            -1px 0 #000,
            0 1px #000,
            0 -1px #000,
            1px 1px #000,
            -1px -1px #000,
            1px -1px #000,
            -1px 1px #000;
    }

    @media screen and (max-width:1920px) {
        :deep(.el-progress-bar__outer) {
            height: 24px !important;
        }

        :deep(.el-progress-bar__innerText span) {
            font-size: 14px;
            margin-right: 10px;
        }
    }

    @media screen and (min-width:1921px) {
        :deep(.el-progress-bar__outer) {
            height: 48px !important;
        }

        :deep(.el-progress-bar__innerText span) {
            font-size: 40px;
            margin-right: 50px;
        }
    }
}

:deep(.el-progress) {
    width: 30vw;
}
</style>